<template>
  <a-table
    :style="{ width: '100%' }"
    :loading="loading"
    :columns="tableColumns"
    :data-source="dataList"
    :pagination="false"
    :scroll="tableScroll"
    class="header-right-angle admin-table"
    :custom-row="(r:any) => ({ onClick: () => goAppDetail(r.id) })"
    @change="onTableChange"
  >
    <template #bodyCell="{ column, record }">
      {{ replaceEmptyStr(record[column.dataIndex as string]) }}
    </template>
  </a-table>
</template>

<script lang="ts" setup>
  import { computed, inject, ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { clientApi } from '@/services/api'
  import { replaceEmptyStr } from '@/utils'
  import { filterTableColumns } from '@/utils/ant-component'

  export interface ApiItem {
    afterValidTime?: string
    algoName?: string
    appStatus?: string
    auditId?: number
    authTime?: string
    beforeValidTime?: string
    id?: string
    onlineId?: string
    operateMethodId?: string
    operateMethodStatus?: string
    operateMethodTime?: string
    qps?: number
    totalCallNum?: number
    usedCallNum?: number
    version?: string
  }

  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '应用编号',
        dataIndex: 'number',
        width: 160
      },
      {
        title: '应用名称',
        dataIndex: 'name',
        width: 140
      },
      {
        title: '在线服务ID',
        dataIndex: 'onlineId',
        width: 140
      },
      {
        title: 'License ID',
        dataIndex: 'licenseId',
        width: 140
      },
      {
        title: '序列号',
        dataIndex: 'serialNum',
        width: 200
      },
      {
        title: '应用描述',
        dataIndex: 'content',
        width: 200
      },
      {
        title: '应用更新时间',
        dataIndex: 'updateTime',
        isSort: true,
        width: 180
      },
      {
        title: '应用创建时间',
        dataIndex: 'createTime',
        isSort: true,
        width: 200
      }
    ])
  )
  const tableScroll = computed(() => {
    const scrollX = tableColumns.value.reduce((prev, curr) => {
      return prev + (curr.width as number)
    }, 0)
    return {
      x: scrollX > 1022 ? scrollX : undefined,
      y: dataList.value.length >= 9 ? 510 : undefined
    }
  })

  const clientId = inject('clientId')

  const pageForm = ref({
    uid: clientId,
    columns: 'updateTime',
    order: 'desc'
  })

  const { data, loading, runAsync: getDataList } = useRequest<any>(clientApi.appList)
  const dataList = computed<ApiItem[]>(() => {
    if (!data.value?.data) {
      return []
    }
    return data.value?.data
  })

  const onTableChange = (pagination: any, filters: any, sorter: any) => {
    pageForm.value.columns = sorter.field
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'
    if (!sorter.order) {
      pageForm.value.columns = 'updateTime'
      pageForm.value.order = 'desc'
    }
    getDataList(pageForm.value)
  }

  const goAppDetail = (id: string) => {
    // router.push({
    //   path: `/open-platform/client-manage/client-list/detail/app-detail/${id}`
    // })
    window.open(`/user-manage/life/app-detail/${id}`)

    // window.open(`/open-platform/client-manage/client-list/detail/app-detail/${id}`)
  }

  getDataList(pageForm.value)
</script>
